<template>
	<h3>ModuleDemo</h3>
	age: {{ $store.state.b.age }} <br />
	age: {{ age }} <br />
	aCount: {{ aCount }} <br />
	rootCount: {{ rootCount }} <br />
	doubleCount: {{ doubleCount }} <br />
	sumWithRootCount: {{ sumWithRootCount }} <br />

	<button @click="$store.commit('b/setAge', 2)">commit</button><br />
	<button @click="$store.dispatch('b/setAge', { n: 5 })">dispatch</button><br />
	<hr />
	<button @click="setAge({ n: 5 })">setAage</button>
	<hr>
	<button @click="addRootCount({n:100})">addRootCount</button>
</template>

<script>
	import { mapState, mapActions,createNamespacedHelpers } from "vuex";
	const { mapGetters:aMapGetters } = createNamespacedHelpers("a");

	export default {
		created() {
			console.log("this.$store", this.$store);
		},
		computed: {
			...mapState({
				rootCount:"count"
			}),
			...mapState("b", ["age"]),
			...mapState("a", {
				aCount: "count",
			}),
			...aMapGetters(["doubleCount","sumWithRootCount"])
		},
		methods: {
			...mapActions("b", [
				"setAge", // -> this.foo()
			]),
			...mapActions({
				addRootCount:"addCount"
			})
		},
	};
</script>

<style>
</style>